<template>
  <div class="item-box">
    <div class="main">
      <div class="content-box">
        <el-form>
          <el-row>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item class="pro_title" label="当前项目:">
                <div>{{ currentProject.projectName }}</div>
                <!-- <div>{{ currentProject.LastTestData }}</div> -->
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item class="pro_npi" label="进行NPI测试单元数:">
                {{ currentProject.NPITestNumber ? currentProject.NPITestNumber : '--' }}
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="量产芯片数:">
                {{ currentProject.chipNumber ? currentProject.chipNumber : '--' }}
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="平均OEE:">
                {{ currentProject.averageOEE ? currentProject.averageOEE : '--' }}
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="16" :lg="12" :xl="12">
              <el-form-item class="pro_title" label="">
                {{ currentProject.LastTestData }}
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="平均UPH:">
                {{ currentProject.averageUPD ? currentProject.averageUPD : '--' }}
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="平均良率:">
                {{ currentProject.averageYield ? currentProject.averageYield : '--' }}
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-row>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="量产芯片数:">
                {{ currentProject.chipNumber ? currentProject.chipNumber : '--' }}
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="平均OEE:">
                {{ currentProject.averageOEE ? currentProject.averageOEE : '--' }}
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="平均UPH:">
                {{ currentProject.averageUPD ? currentProject.averageUPD : '--' }}
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="平均良率:">
                {{ currentProject.averageYield ? currentProject.averageYield : '--' }}
              </el-form-item>
            </el-col>
          </el-row> -->
          <el-row v-if="isJson">
            <el-col :xs="24" :sm="24" :md="16" :lg="12" :xl="12">
              <el-form-item label="当前JSON文件:">
                <!-- {{ currentJson.jsonName ? getLastPartOfUrl(currentJson.jsonName) : '--' }} -->
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="时间:">
                {{ currentJson.time ? currentJson.time : '--' }}
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="批次:">
                {{ currentJson.lotId ? currentJson.lotId: '--' }}
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="16" :lg="12" :xl="12">
              <el-form-item label="">
                {{ currentJson.jsonName ? getLastPartOfUrl(currentJson.jsonName) : '--' }}
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="Handler:">
                {{ currentJson.handlerId ? currentJson.handlerId : '--' }}
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="Tester:">
                {{ currentJson.machine ? currentJson.machine : '--' }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="choose">
        <el-select v-model="currentProjectName" size="small" filterable placeholder="切换项目" @change="changeProjectChange">
          <el-option
            v-for="item in projects"
            :key="item.projectId"
            :label="item.projectName"
            :value="item.projectId"
          />
        </el-select>
        <el-select v-if="isJson" v-model="currentJsonName" size="small" filterable placeholder="选择JSON文件" @change="changeJsonChange">
          <el-option
            v-for="item in jsonList"
            :key="item.code"
            :label="item.jsonName"
            :value="item.code"
          />
        </el-select>
        <el-button v-if="isNPI" type="danger" style="margin-top:5px" size="small" @click="pushNPI(currentProjectName)">SetUp NPI Process</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isNPI: {
      type: Boolean,
      default: false
    },
    isJson: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentProject: {},
      currentProjectName: '',
      currentJson: {},
      currentJsonName: '',
      projects: [],
      jsonList: []
    }
  },
  methods: {
    async init(projectId) {
      this.getProject()
      this.changeProjectChange(projectId)
    },
    getLastPartOfUrl(url) {
      var parts = url.split('/').filter(Boolean) // 使用'/'分割URL并去除空字符串
      return parts[parts.length - 1] // 返回最后一部分
    },
    async changeProjectChange(value) {
      await this.getCurrectProject(value)
      this.$emit('currentProjectChange', this.currentProject.projectId)
    },
    async getCurrectProject(projectId) {
      let params = null
      if (projectId && projectId !== '') {
        params = { 'projectId': projectId + '' }
      }
      await this.$fetchData(this.$api.projectController.getUserNewOpened, params, 'post').then(res => {
        this.currentProject = res
        this.$store.commit('user/SET_PROJECTID', this.currentProject.projectId)
      })
      await this.getJsonList(this.currentProject.projectId)
    },
    changeJsonChange(value) {
      this.$store.commit('user/SET_JSONCODE', value)
      this.currentJson = this.jsonList.find(item => item.code === value)
      this.$emit('currentJsonChange', value)
    },
    getProject() {
      const params = {
        'page': 1,
        'pageSize': 20000,
        'enable': '1'
      }
      this.$fetchData(this.$api.projectController.getProject, params, 'post').then(res => {
        this.projects = res.data
      })
    },
    async getJsonList(projectId) {
      let params = null
      if (projectId) {
        params = { 'projectId': projectId + '' }
      }
      await this.$fetchData(this.$api.projectController.getJsonList, params, 'post').then(res => {
        if (res && res.length > 0) {
          this.jsonList = res
          this.currentJson = this.jsonList[0]
          this.$store.commit('user/SET_JSONCODE', res[0].code)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item{
  margin-bottom: 0px;
  // .el-form-item__label{
  //   color: black;
  // }
  .el-form-item__content{
    color: #606266;
  }
  label{
    font-weight: 400;
  }
}

.pro_title{
    ::v-deep .el-form-item__label{
      font-size: 18px;
      font-weight: 700;
      color: black;
    }
    ::v-deep .el-form-item__content{
      font-size: 18px;
      font-weight: 700;
      color: black;
    }
}

.pro_npi{
    ::v-deep .el-form-item__label{
      font-weight: 700;
      color: black;
    }
    ::v-deep .el-form-item__content{
      font-weight: 700;
      color: black;
    }
}

.item-box {
    padding: 10px 10px 10px 10px;
    margin-bottom: 10px;
    background-color: #fafafa;

  .main {
    width: 100%;
    background-color: #fff;
    border-radius: 4px;
    padding: 10px 20px;
    box-sizing: border-box;
    // border: 1px solid #f1eeee;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
  }
  .content-box {
    width: 70%;
    .title-box {
      display: flex;
      align-items: center;
      height: 25px;
          margin-top: 10px;
      .badge {
        width: 8px;
        height: 8px;
        border-radius: 4px;
        margin-right: 5px;
        background-color: red;
      }
      .title {
        width: 30%;
        font-size: 18px;
        font-weight: 600;
      }
    }

    .time {
      height: 20px;
      font-size: 14px;
      color: #797b7e;
      margin-top: 10px;
      width: 30%;
    }
    .row {
      height: 20px;
      display: flex;
      justify-items: center;
      justify-content: space-between;
      font-size: 14px;
      color: #797b7e;
      margin-top: 20px;
    margin-bottom: 10px;
    }
  }
  .choose{
    display: flex;
    flex-direction:column;
    margin-top: 10px;
    align-items: center;
    ::v-deep .el-select .el-input__inner{
        background-color: #0057FE;
        color: white;
    }
    ::v-deep .el-select .el-input__inner::placeholder{
        color: white;
    }
    ::v-deep .el-select .el-input .el-select__caret{
      color: #fff;
    }
  }
  .botton-box {
    display: flex;
    justify-items: center;
    justify-content: flex-end;
    margin-top: 30px;
    .hl {
      background: #f5f7fa;
      border: 0px;
    }
  }
}

</style>
